<template>
  <div id="role-wrap">
    <div class="add-role">
      <el-button icon="iconfont icon-jiufuqianbaoicon06" size="mini" class="exportBtn add" @click="addRole"
        >添加角色</el-button
      >
    </div>
    <div class="role-list">
      <div v-if="roleList.length" class="role-list_wrap">
        <div
          v-for="(item, index) in roleList"
          :key="item.id"
          @click="roleClick(item.id)"
          :class="(index + 1) % 4 == 0 ? 'role_right ro' : 'role ro'"
        >
          <h5 v-if="item.roleName.length < 7">{{ item.roleName }}</h5>
          <el-tooltip class="item" effect="light" :content="item.roleName" placement="top" v-else>
            <h5 class="overflow">{{ item.roleName }}</h5>
          </el-tooltip>
          <p class="powers">拥有权限:{{ item.powerNum }}</p>
          <p class="users">所含人员:{{ item.peopleNum }}</p>
        </div>
      </div>

      <div v-else class="role_bg_wrap">
        <div class="role_bg">
          <el-image :src="require('../../../assets/role_bg2.png')"></el-image>
          <p style="color: #999999">暂无角色，请点击上方“添加角色”按钮进行添加～</p>
        </div>
      </div>
    </div>
    <element-dialog :Width="'500px'" :ClassName="'role-dialog'" :Title="title" :Visible="roleVisible" @done="done">
      <role-form v-if="title === '添加角色'" :roleTitle="title" @close="closed" @save="save"> </role-form>
      <role-form v-else :roleId="roleId" :roleTitle="title" @close="closed" @save="save"></role-form>
    </element-dialog>
  </div>
</template>

<script>
import ElementDialog from '../../../components/ElementDialog.vue'
import roleForm from './components/roleForm.vue'
export default {
  components: { roleForm, ElementDialog },
  data() {
    return {
      // 角色列表
      roleList: [],
      title: '',
      roleId: null,
      roleVisible: false
    }
  },
  mounted() {
    this.getRoleData()
  },
  methods: {
    done() {
      this.title = ''
      this.roleId = ''
      this.roleVisible = false
    },
    // 对话框关闭回调
    closeDialog(done) {
      this.title = ''
      this.roleId = ''
      done()
    },
    closed() {
      this.title = ''
      this.roleId = ''
      this.roleVisible = false
    },
    save() {
      this.title = ''
      this.roleId = ''
      this.roleVisible = false
      this.getRoleData()
    },
    // 添加角色
    addRole() {
      this.title = '添加角色'
      this.roleVisible = true
    },
    // 点击单个角色查看权限
    roleClick(role_id) {
      this.title = '修改角色'
      this.roleId = role_id
      this.roleVisible = true
    },
    // 获取角色列表
    getRoleData() {
      this.$https({
        method: 'get',
        url: '/api/roleList',
        data: {}
      })
        .then(res => {
          // console.log(res);
          if (res.code === 0) {
            this.roleList = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#role-wrap {
  height: 100%;
  .role-dialog {
    .el-dialog__body {
      padding: 30px 40px;
    }
  }
  .add-role {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
  }
  .role-list {
    width: 940px;
    height: calc(100% - 64px);
    padding: 0 30px;

    .role-list_wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .role_bg_wrap {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .role_bg {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .ro {
      width: 113px;
      height: 142px;
      background-image: url('../../../assets/role_bg.png');
      margin-bottom: 80px;
      padding: 16px 10px 20px 40px;
      cursor: pointer;
      h5 {
        font-size: 16px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        width: 100px;
        height: 32px;
        background-color: #fa7355;
      }
      .overflow {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .powers {
        color: #166df1;
        font-size: 14px;
        text-decoration: underline;
        margin-top: 38px;
      }
      .users {
        color: #166df1;
        font-size: 14px;
        text-decoration: underline;
        margin-top: 14px;
      }
    }
    .role {
      margin-right: 96px;
    }
    .role_right {
      margin-right: 0;
    }
  }
  .xz {
    width: 60px;
  }
  .add {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 114px;
  }
}
</style>
